import React, { Fragment } from 'react';
import Cell from '../index'
import styles from './index.module.scss'
import LazyLoad from 'react-lazyload';
import { Typography } from 'antd';

const { Title, Text } = Typography;

interface PropsInterface {
  item: any,
  iconKey: string,
  titleKey: string,
  titleUrlKey: string,
  centerTextKey: string,
  bottomTextKey: string,
  onClick: (item: any) => void
}

const FixedCell = function(props: PropsInterface) {

  const titleUrlClick = function(event: React.MouseEvent<HTMLElement>) {
    if (props.titleUrlKey) {
      event.preventDefault()
    }
  }

  return <Cell onClick={ () => props.onClick(props.item) } className={ styles['con-table-view-cell-fixed'] }>
    <Fragment>
        <LazyLoad>
          <i 
            className={ `${styles['icon']} w-image-fit` } 
            style={{ backgroundImage: `url(${ props.item[props.iconKey] })` }}
          ></i>
          <a
            className={ props.titleUrlKey ? 'w-hover-text' : '' } 
            onClick={ titleUrlClick } 
            rel="noopener noreferrer"
             target='_blank' 
             href={ props.item[props['titleUrlKey']] }>
             <Title ellipsis level={4}>{ props.item[props.titleKey] }</Title>
          </a>
          <Text type="secondary">{ props.item[props.centerTextKey] }</Text><br />
          <Text>{ props.item[props.bottomTextKey] }</Text>
        </LazyLoad>
    </Fragment>
  </Cell>
}

FixedCell.defaultProps = {
  titleUrlKey: ''
};

export default FixedCell